<template>

  <div class="node " :class="{ flexColumn: (elNode.name == 'IF' || elNode.name == 'SWITCH') }"
    @click="clickNode(elNode)">


    <!-- 组件名称 -->
    <div
      :class="{ comTextBorder: elNode.comCss, thenTextBorder: elNode.thenCss, switchTextBorder: elNode.switchCss, ifTextBorder: elNode.ifCss }">
      <div>{{ elNode.displayName }}</div>
      <div class="switchtips">{{ elNode.switchTips }}</div>

    </div>


    <div class="backOperate">
      <button v-if="elNode.name !== 'THEN'" @click="deleteNode(elNode)">删除</button>
      <button v-if="elNode.type == 'idType'" @click="setDataInput(elNode)">数据</button>
      <input type="text" v-if="elNode.showDataInput" v-model="elNode.data">
      <button v-if="elNode.name == 'SWITCH'" @click="editSwitch(elNode)">修改</button>
    </div>

    <div v-if="elNode.type == 'idType' || elNode.name == 'THEN'" class="arrow-line"></div>
    <div v-if="elNode.type == 'idType' || elNode.name == 'THEN'" class="arrow-right"></div>

    <!-- <div v-if="elNode.childIsSwitchOrIf" class="pillar"></div> -->

    <!-- 嵌套 -->
    <ELNodeComponent v-for="(item, index) in elNode.child" :el-node="item" @code="showCode($event)">
    </ELNodeComponent>

    <!-- 操作按钮显示逻辑： 开关为false 并且 组件是THEN组件 -->
    <div class="operate" v-if="!elNode.hiddenOperate && elNode.name == 'THEN'">
      <div class="con">
        <button @click="addCom(elNode)">添加普通组件</button>
        <button @click="addSwitch(elNode)">添加选择组件</button>
        <button @click="addIf(elNode)">添加判断组件</button>
        <!-- <button @click="hiddenNode(elNode)">隐藏</button> -->
      </div>
      
    </div>


    <div class="cmp">
        <div class="con" v-if="elNode.showAddCommon">
          <p>普通组件</p>
          <button @click="getCreditScore(elNode)">获取信用分组件</button>
          <button @click="getGhomeDays(elNode)">获取注册天数</button>
          <button @click="processBanPublicActivity(elNode)">封禁发布活动</button>
          <button @click="processStopWarning(elNode)">停止走马灯警告</button>
          <button @click="processStartWarning(elNode)">开始走马灯警告</button>
          <button @click="processCanPublicActivity(elNode)">恢复发布活动</button>
          <button @click="getGhomeDays(elNode)">获取注册天数</button>
        </div>

        <div class="con" v-if="elNode.showAddSwitch">
          <p>选择组件</p>
          <button @click="processCreditSwitch(elNode)">信用分选择组件</button>
          <button @click="processGhomeDaysSwitch(elNode)">主页创建日选择组件</button>

        </div>

        <div class="con" v-if="elNode.showAddIf">
          <p>判断组件</p>
          <button @click="processStarGroupIF(elNode)">判断是否明星团长</button>

        </div>


      </div>
  </div>



</template>

<script setup lang="ts">
import ELNodeComponent from './ELNodeComponent.vue'
import { ELNode } from '../ts/ELNode'

const emit = defineEmits([ 'code'])
// 组件入参
defineProps<{
  elNode: ELNode
}>()

const showCode=(e:ELNode)=>{
  console.log('子节点',e)
  emit('code',e)
}

const editSwitch=(node:ELNode)=>{
  console.log(node)
  console.log('触发点',node.conditionNodeId)
  emit('code',node)
}

const processStarGroupIF = (node: ELNode) => {
  //判断是否明星团长
  node.showAddIf = false
  node.hiddenOperate = true
  let then1 = new ELNode("elType", "THEN", "判断")
  then1.switchTips = "(是)"
  then1.thenCss = true
  then1.aliasNodeId = "tif1"

  let then2 = new ELNode("elType", "THEN", "判断")
  then2.switchTips = "(否)"
  then2.thenCss = true
  then1.aliasNodeId = "tif2"

  let item: ELNode = new ELNode("elType", "IF", "判断是否明星团长", new Array(then1, then2))
  node.childIsSwitchOrIf = true
  item.parent = node
  item.conditionNodeId = "s13"
  item.nodeId = "9"
  item.ifCss = true
  node.addChild(item)
}

const processGhomeDaysSwitch = (node: ELNode) => {

  node.showAddSwitch = false
  node.hiddenOperate = true
  let then1 = new ELNode("elType", "THEN", "选项1")
  then1.switchTips = "(注册天数小于1)"
  then1.thenCss = true
  then1.aliasNodeId = "t1"

  let then2 = new ELNode("elType", "THEN", "选项2")
  then2.switchTips = "(注册天数大于等于1小于90)"
  then2.thenCss = true
  then2.aliasNodeId = "t2"

  let then3 = new ELNode("elType", "THEN", "选项3")
  then3.switchTips = "(注册天数大于等于90)"
  then3.thenCss = true
  then3.aliasNodeId = "t3"


  let item: ELNode = new ELNode("elType", "SWITCH", "主页创建日选择组件", new Array(then1, then2, then3))
  node.childIsSwitchOrIf = true
  item.parent = node
  item.nodeId = "8"
  item.conditionNodeId = "s12"
  item.switchCss = true
  item.code="let days = publishActivityRuleContext.getGhomeDays()\nif(days<1){\n  return \"d1\"\n}else if(days<90){\n  return \"d2\"\n}else{\n  return \"d3\"\n}\n"
  node.addChild(item)

}

const processCreditSwitch = (node: ELNode) => {
  node.showAddSwitch = false
  node.hiddenOperate = true
  let then1 = new ELNode("elType", "THEN", "选项1")
  then1.switchTips = "(信用分小于20)"
  then1.thenCss = true
  then1.aliasNodeId = "t1"

  let then2 = new ELNode("elType", "THEN", "选项2")
  then2.switchTips = "(信用分大于等于20小于70)"
  then2.thenCss = true
  then2.aliasNodeId = "t2"

  let then3 = new ELNode("elType", "THEN", "选项3")
  then3.switchTips = "(信用分大于等于70)"
  then3.thenCss = true
  then3.aliasNodeId = "t3"


  let item: ELNode = new ELNode("elType", "SWITCH", "信用分选择组件", new Array(then1, then2, then3))
  node.childIsSwitchOrIf = true
  item.parent = node
  item.conditionNodeId = "s1"
  item.switchCss = true
  item.code="let score = publishActivityRuleContext.getCreditScore()\nif(score<20){\n  return \"t1\"\n}else if(score<70){\n  return \"t2\"\n}else{\n  return \"t3\"\n}\n"
  node.addChild(item)


}

const processCanPublicActivity = (node: ELNode) => {
  //恢复发布活动组件
  node.showAddCommon = false
  let item: ELNode = new ELNode("idType", "", "恢复发布活动组件")
  item.nodeId = "processCanPublicActivity"
  item.parent = node
  item.comCss = true
  node.addChild(item)
}
const processStartWarning = (node: ELNode) => {
  //开始走马灯警告
  node.showAddCommon = false
  let item: ELNode = new ELNode("idType", "", "开始走马灯警告")
  item.nodeId = "processStartWarning"
  item.parent = node
  item.comCss = true
  node.addChild(item)
}

const processStopWarning = (node: ELNode) => {
  //停止走马灯警告
  node.showAddCommon = false
  let item: ELNode = new ELNode("idType", "", "停止走马灯警告")
  item.nodeId = "processStopWarning"
  item.parent = node
  item.comCss = true
  node.addChild(item)
}

const processBanPublicActivity = (node: ELNode) => {
  // 封禁发布活动组件
  node.showAddCommon = false
  let item: ELNode = new ELNode("idType", "", "封禁发布活动组件")
  item.nodeId = "processBanPublicActivity"
  item.parent = node
  item.comCss = true
  node.addChild(item)
}

const getCreditScore = (node: ELNode) => {
  // node.hiddenOperate = true
  node.showAddCommon = false
  let item: ELNode = new ELNode("idType", "", "获取信用分")
  item.nodeId = "getCreditScore"
  item.parent = node
  item.comCss = true
  node.addChild(item)
}

const getGhomeDays = (node: ELNode) => {
  node.showAddCommon = false
  let item: ELNode = new ELNode("idType", "", "获取注册天数")
  item.nodeId = "getGhomeDays"
  item.parent = node
  item.comCss = true
  node.addChild(item)
}

//添加普通组件
const addCom = (node: ELNode) => {
  node.showAddCommon = true
  node.showAddSwitch = false
  node.showAddIf = false
}
//添加选择组件
const addSwitch = (node: ELNode) => {


  node.showAddCommon = false
  node.showAddSwitch = true
  node.showAddIf = false
}
//添加判断组件
const addIf = (node: ELNode) => {

  node.showAddCommon = false
  node.showAddSwitch = false
  node.showAddIf = true
}

const clickNode = (node: ELNode) => {
  // node.hiddenOperate = false;
}

const hiddenNode = (node: ELNode) => {
  console.log("click", node)
  node.hiddenOperate = true;
}

const setDataInput = (node: ELNode) => {
  node.showDataInput = true
}
const deleteNode = (node: ELNode) => {
  console.log("click", node)
  let c = node.parent?.child
  if (c == undefined) return
  let j = -1;
  for (let i = 0; i < c.length; i++) {
    const element = c[i];
    if (node === element) {
      j = i
      break
    }
  }
  if (j >= 0) {
    c.splice(j, 1);
    if (node.parent == undefined) return
    node.parent.hiddenOperate = false

    node.parent.childIsSwitchOrIf = false

  }


}


</script>

<style scoped>
.node {
  display: flex;
  /* 默认水平 */
  flex-direction: row;
  /* 不换行 */
  flex-wrap: nowrap;
  /* 定义了项目在主轴(横轴)上的对齐方式 */
  justify-content: center;
  /* 元素在侧轴（纵轴）方向上的对齐方式 */
  align-items: center;

  padding: 0.5vw;
  /* margin-top: 2vh; */
}

.operate {
  display: flex;
  /* 默认水平 */
  flex-direction: row;
  /* 不换行 */
  flex-wrap: nowrap;

}


.flexColumn {
  flex-direction: column;
  align-items: flex-start;
  border-left: 3px solid red;
  padding-left: 1vw;
}

.thenTextBorder {
  /* border: 1px solid green; */
}

.comTextBorder {
  /* border: 1px solid blue; */
}

.ifTextBorder {
  /* border: 1px solid plum; */
}

.switchTextBorder {
  /* border: 1px solid tomato; */
}

.switchtips {
  font-size: 0.1vw;
  color: tomato;
}


.iftip {
  font-size: 0.1vw;
  color: plum;
}

.arrow-right {

  width: 1vw;

  height: 1vw;

  background-color: transparent;
  /* 模块背景为透明 */

  border-color: #f02c57;

  border-style: solid;

  border-width: 3px 3px 0 0;

  /* margin: 300px auto; */

  transform: rotate(45deg);
  /*箭头方向可以自由切换角度*/

}

.arrow-line {
  width: 2vw;
  height: 1vw;
  background-color: transparent;
  border-color: #f02c57;
  border-style: solid;
  border-width: 3px 0 0 0;
  transform: translate(20px, 7px);
  /* transform: translateY(6px); */
}

.cmp {
  display: flex;
  /* 默认水平 */
  flex-direction: row;

  /* 定义了项目在主轴(横轴)上的对齐方式 */
  justify-content: center;
  /* 元素在侧轴（纵轴）方向上的对齐方式 */
  align-items: center;


  /* padding:1 1 1 1; */
  /* border: 1px solid red; */
}

.con {
  display: flex;
  /* 默认水平 */
  flex-direction: column;
  padding-left: 1vh;
  padding-right: 1vh;
}

.backOperate {
  padding-left: 1vw;
}
</style>
